<template>
  <div>
    <p class="pt">用户账号信息</p>
    <a-form-model :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" ref="ruleForm">
      <a-form-model-item label="用户名" prop="name">
        <div style="display:flex;align-items: center;">
          <a-tooltip style="display:inline;margin-right: 5px;">
              <template slot="title">
                <div>建议用户名与手机号码一致</div>
              </template>
              <a-icon type="info-circle" />
            </a-tooltip>
        <a-input v-model="form.name" />
        </div>
        
      </a-form-model-item>
      <a-form-model-item label="密码" prop="password">
        <a-input v-model="form.password" />
      </a-form-model-item>
      <a-form-model-item label="手机号码" prop="phone">
        <a-input v-model="form.phone" />
      </a-form-model-item>
      <a-form-model-item label="真实姓名">
        <div>{{ form.realName }}</div>
      </a-form-model-item>
      <a-form-model-item label="身份证号">
        <div>{{ form.identityCard }}</div>
      </a-form-model-item>
      <a-form-model-item label="上传照片">
        <j-image-upload bizPath="scott/pic" v-model="form.pic" />
      </a-form-model-item>
      
    </a-form-model>
  </div>
</template>

<script>
export default {
  props:['sjskPersonInfoVO','huancun'],
  methods:{
    opendata(val){
      console.log(val);
      this.$emit('opendata',val)
    },
  },
  data() {
    return {
      labelCol: { span: 2 },
      wrapperCol: { span: 6 },
      form: {
        name:this.sjskPersonInfoVO.phone,
        phone:this.sjskPersonInfoVO.phone,
        realName:this.sjskPersonInfoVO.realName,
        identityCard:this.sjskPersonInfoVO.identityCard,
      },
      rules:{
        name: [{ required: true, message: '请输入用户名', trigger: 'change' },],
        password: [{ required: true, message: '请输入密码', trigger: 'change' },],
        phone: [{ required: true, message: '请输入手机号', trigger: 'change' },],
      }
    };
  },
  watch:{
    form:{
      immediate:true,
      deep:true,
      handler(val){
        this.opendata(val)
      }
    },
    huancun:{
      deep:true,
      handler(val){
        if(val.OpenForm){
          this.form = val.OpenForm
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.pt {
    font-weight: bold;
    // margin-right: 800px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 30px;
    padding-bottom: 20px;
  }
  
</style>